<template>
  <div class="panel">
    <!-- 左侧按钮 -->
    <div class="left-section column">
      <!-- 瞬时按钮 -->
<button
  class="switch-btn"
  :class="{ active: selectedType === 'instant' }"
  :style="selectedType === 'instant' ? getBtnStyle('instant') : {}"
  @click="selectedType = 'instant'"
>
  瞬时
</button>

<!-- 累计按钮 -->
<button
  class="switch-btn"
  :class="{ active: selectedType === 'total' }"
  :style="selectedType === 'total' ? getBtnStyle('total') : {}"
  @click="selectedType = 'total'"
>
  累计
</button>
    </div>

    <!-- 右侧图表和数据 -->
    <div class="right-section">
      <div class="chart-container" ref="chartRef"></div>

      <div class="data-footer">
        <span v-if="selectedType === 'instant'">
          101皮带瞬时过煤流量：{{ instantFlow }} 吨
        </span>
        <span v-else> 101皮带今日过煤累计：{{ totalFlow }} 吨 </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import * as echarts from "echarts";

// 当前选中类型
const selectedType = ref<"instant" | "total">("instant");

// 模拟数据
const instantFlow = ref(123.4);
const totalFlow = ref(4567.8);

//曲线按钮颜色
const buttonColors = {
  instant: {
    bg: '#00ffff',
    text: '#000',
  },
  total: {
    bg: '#00ff00',
    text: '#000',
  },
}

const lineColors = {
  instant: {
    line: "#00ffff",
    area: ["rgba(0,255,255,0.3)", "rgba(0,255,255,0)"],
    point: "#00ffff",
  },
  total: {
    line: "#00ff00",
    area: ["rgba(0,255,0,0.3)", "rgba(0,255,0,0)"],
    point: "#00ff00",
  },
};

const getBtnStyle = (type: 'instant' | 'total') => ({
  backgroundColor: buttonColors[type].bg,
  color: buttonColors[type].text,
  borderColor: buttonColors[type].bg,
})

// 图表
const chartRef = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;

// 初始化图表
const renderChart = () => {
  if (!chartRef.value) return;

  if (!chartInstance) {
    chartInstance = echarts.init(chartRef.value);
  }

  const dataInstant = [1200, 132, 101, 134];
  const dataTotal = [1000, 2300, 3300, 4567, 4800, 4900, 5000];

  const currentData =
    selectedType.value === "instant" ? dataInstant : dataTotal;
  const maxVal = Math.max(...currentData) * 1.2;

  const xAxisData =
    selectedType.value === "instant"
      ? ["08:00", "09:00", "10:00", "11:00"]
      : ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
  const currentColors = lineColors[selectedType.value];
  const option = {
    title: {
      text:
        selectedType.value === "instant" ? "瞬时过煤量曲线" : "累计过煤量曲线",
      textStyle: { color: "#0ff", fontSize: 16 },
      left: "center",
    },
    backgroundColor: "transparent",
    tooltip: { trigger: "axis" },
    grid: {
      top: 40,
      bottom: 40,
      left: 50,
      right: 20,
    },
    xAxis: {
      type: "category",
      data: xAxisData,
      axisLine: { lineStyle: { color: "#0ff" } },
      axisLabel: { color: "#0ff" },
    },
    yAxis: {
      type: "value",
      min: 0,
      max: maxVal,
      axisLine: { lineStyle: { color: "#0ff" } },
      axisLabel: { color: "#0ff" },
      splitLine: { lineStyle: { color: "#044d4d" } },
    },
    series: [
      {
        data: currentData,
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 8,
        itemStyle: {
          color: currentColors.point,
          borderColor: currentColors.point,
          borderWidth: 2,
        },
        lineStyle: {
          color: currentColors.line,
          width: 3,
          shadowColor: currentColors.line,
          shadowBlur: 10,
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: currentColors.area[0] },
            { offset: 1, color: currentColors.area[1] },
          ]),
        },
        animationDuration: 800,
        animationEasing: "cubicOut",
      },
    ],
  };

  chartInstance.setOption(option);
};

watch(selectedType, () => {
  renderChart();
});

onMounted(() => {
  renderChart();
});
</script>

<style scoped>
.panel {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 1em;
  background: rgba(0, 255, 255, 0.05);
  color: #0ff;
  border: 1px solid #0ff;
  border-radius: 12px;
  box-shadow: 0 0 15px #0ff;
  font-family: monospace;
  box-sizing: border-box;
}

/* 左侧按钮区域 */
.left-section.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1em;
  padding-right: 1em;
}

.switch-btn {
  padding: 0.5em 1em;
  background: transparent;
  border: 1px solid #0ff;
  color: #0ff;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
}
.switch-btn.active {
  background: #0ff;
  color: #000;
}

/* 右侧图表 + 数据 */
.right-section {
  flex: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 1em;
  gap: 1em;
}

.chart-container {
  height: 100%;
  width: 100%;
  border: 1px solid #0ff;
  border-radius: 8px;
  background: rgba(0, 255, 255, 0.03);
}

.data-footer {
  font-size: 1em;
  color: #0ff;
  padding-top: 0.6em;
  border-top: 2px dashed #0ff;
  text-align:
   center;
}

</style>
